<style lang="scss">
.el-comfirm-poptip{
   i{
        font-size: 16px;
        color: #f90;
        line-height: 18px;
        position: absolute;
   }
   p{
       padding-left: 20px;
   }
}
</style>

<template>
  <el-popover
    :width="width"
    v-model="visible"
    placement="top">
    <div class="el-comfirm-poptip">
      <i class="el-icon-question"/>
      <p>{{ title }}</p>
    </div>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="cancel">取消</el-button>
      <el-button type="primary" size="mini" @click="ok">确定</el-button>
    </div>
    <el-button slot="reference" :size="size" :type="type" :loading="loading" >
      <slot>删除</slot>
    </el-button>
  </el-popover>
</template>
<script>
import { oneOf } from '@/utils'
export default {
  name: 'ConfirmPoptip',
  props: {
    trigger: {
      validator(value) {
        return oneOf(value, ['click', 'focus', 'hover'])
      },
      default: 'click'
    },
    loading: {
      type: Boolean,
      default: false
    },
    placement: {
      validator(value) {
        return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'])
      },
      default: 'top'
    },
    size: {
      validator(value) {
        return oneOf(value, ['medium', 'small', 'mini', ''])
      },
      default: ''
    },
    type: {
      validator(value) {
        return oneOf(value, ['primary', 'success', 'warning', 'danger', 'info', 'text'])
      },
      default: ''
    },
    title: {
      type: [String, Number],
      default: '确认删除？'
    },
    width: {
      type: [String, Number],
      default: '150px'
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {

    cancel() {
      this.visible = false
      this.$emit('on-cancel')
    },
    ok() {
      this.visible = false
      this.$emit('on-ok')
    }
  }
}
</script>
